<template>
  <div class="ele-body" style="padding-bottom: 71px">
    <el-form
      :hide-required-asterisk="true"
      ref="form"
      :model="form"
      label-width="74px"
      @keyup.enter.native="submit"
      @submit.native.prevent
    >
      <el-card>
        <div class="flex-align-center keyword-top">
          <div class="keyword-title">发布列表</div>
          <div class="flex-align-center border">
            <div v-for="(i,j) in typeList" :key="j" @click="typeClick(i.id)">
              <div :class="form.types == typeList[j].id ? 'select-type' : 'no-select-type'" class="flex default">{{i.name}}</div>
            </div>
          </div>
        </div>
        <el-row :gutter="15" class="flex-align-center m-bottom20">
          <el-col :xs="12" :sm="12" :lg="5" :xl="5">
            <el-form-item label="任务名称" style="margin-bottom: 0">
              <el-input
                v-model="form.name"
                placeholder="请输入任务名称"
                clearable
              />
            </el-form-item>
          </el-col>
         <!-- <el-col :xs="12" :sm="12" :lg="5" :xl="5">
            <el-form-item label="关联创作" style="margin-bottom: 0">
              <el-input
                v-model="form.projectName"
                placeholder="请输入创作剪辑"
                clearable
              />
            </el-form-item>
          </el-col>-->
          <el-col :xs="12" :sm="12" :lg="5" :xl="5">
            <el-form-item label="创建时间" style="margin-bottom: 0">
              <el-date-picker
                v-model="datetime"
                type="daterange"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                class="ele-fluid"
                @change="select"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="19" :sm="19" :lg="9" :xl="9" style="padding-left:40px;">
            <el-button
              icon="el-icon-zoom-out"
              size="small"
              type="primary"
              class="colorBlue"
              @click="see()"
            >
              查询
            </el-button>
            <el-button
              icon="el-icon-refresh-right"
              size="small"
              class="resetting-btn"
              @click="resetting()"
            >
              重置
            </el-button>
          </el-col>
        </el-row>
        <excel-export ref="table" :publish="form" />
      </el-card>
    </el-form>
  </div>
</template>

<script>
  import {accountQuery} from "@/api/matrixManage/accountList";
  import ExcelExport from './components/excel-export.vue';
  export default {
    name: "index",
    components: { ExcelExport },
    data(){
      return{
        datetime:[],
        publish:[],
        typeList:[
          {name:'D音H5发布',id:1},
          {name:'K手发布',id:4}
        ],
        // 表单数据
        form: {
          username:this.$store.state.user.info.username,
          types:1
        },
      }
    },
    // 路由刷新
    activated() {
      if(this.$route.query.types){
        this.form.types=this.$route.query.types
      }

      setTimeout(()=>{
        this.$nextTick(()=>{
          this.$refs['table'].reload()
        })
      },1000)
    },
    created(){
      this.init()
    },
    methods:{
      // 查询日期
      select(e){
        console.log("日期选择e============",e,'form.datetime',this.datetime)
        if(this.datetime){
          Object.assign( this.form, {
            startTime:  this.datetime[0],
            endTime:  this.datetime[1]
          })
        }
      },
      // 1.抖音h5 2.抖音无痕 3.抖音代员工 4.快手  分组动态新增
      init(){
        let info = localStorage.getItem('indexData') ? JSON.parse(localStorage.getItem('indexData')) : {};
        /*let info={
          toCookieReleased:1,
          toBeReleased:1,
        }*/
        console.log("info=======",info)
        //（1.开启 2.发布）
        if(info && info.toCookieReleased==1){
          let item={name:'D音cookie',id:2} //暂无
          this.typeList.splice(1, 0, item);
          // this.checkList.push('D音H5任务发布')
          console.log('D音cookie发布this.form333========')
        }
        if(info && info.toBeReleased==1){
          let item={name:'代发布到D音',id:3}
          this.form.types=3 //如果代用户发布开启则默认选中，否则选中dyH5发布
          this.typeList.splice(0, 0, item);
          // this.checkList.push('代员工发布到D音')
          console.log("代员工发布到D音333")
        }
        else{
          this.form.types=1
        }
      },
      // K手/视频号，切换类型
      typeClick(index){
        this.$set(this.form,'types',index)
        console.log('this.form.types', this.form.types)

        this.$nextTick(()=>{
          this.$refs['table'].reload()
        })
      },
      // 查询
      see(){
        if(!this.form.name){
          delete this.form.name
        }
        if(!this.form.projectName){
          delete this.form.projectName
        }
        if(!this.datetime){
          this.datetime=''
          delete this.form.startTime
          delete this.form.endTime
        }

        if(this.$route.query.types){
          this.form.types=this.$route.query.types
        }
        else{
          this.form.types=1
        }
        this.$nextTick(()=>{
          this.$refs['table'].reload()
        })
      },
      // 重置
      resetting(){
        // this.form.types=1 //重置‘抖音/快手’分类
        this.form.name=''
        this.form.projectName=''
        delete this.form.name
        delete this.form.projectName
        this.datetime=''
        delete this.form.startTime
        delete this.form.endTime

        this.$nextTick(()=>{
          this.$refs['table'].reload()
        })
      },
    }
  }
</script>

<style scoped lang="less">
  .keyword-top{
    padding:4px 4px 20px;
    .keyword-title{
      font-size: 20px;
      line-height: 24px;
      margin-right: 20px;
      color: #000000;
    }
    .border{
      border-radius: 5px;
      overflow: hidden;
      .no-select-type,.select-type{
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 60px;
        padding: 0 5px;
        height: 29px;
      }
      .select-type{
        background: #1E6CEB;
        color: #FFFFFF;
      }
      .no-select-type{
        border: 1px solid #F5F5F5;
        color: #ABAFB5;
      }
    }

  }
  .resetting-btn{
    background: #F5F5F5;
  }

</style>
